<template>
  <div class="app">
    <h2>我是App组件</h2>
    <h3>学校名称：{{ str.toUpperCase() }}</h3>
    <h3>学校名称：{{ str2 }}</h3>
    <h3>学校名称：{{ str3() }}</h3>
    <hr>
    <h3>学校名称：{{ str | daxie | cut(3) }}</h3>
    <br>
    <Child/>
  </div>
</template>

<script>
  import Child from './components/Child.vue'
  export default {
    name:'App',
    components:{Child},
    data() {
      return {
        str:'atguigu',
      }
    },
    methods: {
      str3(){
        return this.str.toUpperCase()
      }
    },
    computed: {
      str2(){
        return this.str.toUpperCase()
      }
    },
    filters:{
      // 1.daxie何时调用？—— 有人使用该过滤器时，用几次调几次
      // 2.daxie中的this是谁？—— 爱谁谁，反正不是我们想要的vc或vm
      // 3.daxie收到什么参数？—— 管道符前表达式执行的结果+自定义参数
      // 4.daxie写不写返回值？—— 必须写
      daxie(value){
        return value.toUpperCase()
      }
    }
  }
</script>

<style>
  .app {
    background-color: #ddd;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px;
  }
</style>